<template>
  <div class="toappointmenthouse-content">
    <back-bar title="预约看房" @toBack="toBack" />
    <div>
      <house-item :houseItem="houseItem" :imgPath="imgPath" />
      <div class="rentUserInfo">
        <div class="userBaseInfo">
          <div class="img-box">
            <img :src="headerImgPath" v-if="headerImgPath" />
            <img src="~assets/img/headImg/defaultHead.jpg" v-else />
          </div>
          <div class="name-box">
            <p>{{rentOutUserRealName}}</p>
          </div>
        </div>
        <div class="phone-box">{{rentOutUserTelPhone}}</div>
      </div>
      <div class="line"></div>
      <div class="dataSelect">
        <van-field
          readonly
          clickable
          name="datetimePicker"
          :value="value"
          label="时间选择"
          placeholder="请选择您方便的时间"
          @click="showPicker = true"
          right-icon="arrow"
        />
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="留言"
          type="textarea"
          maxlength="50"
          placeholder="请输入相对房东说的"
          show-word-limit
          border
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>
      <div class="line"></div>
      <div class="submitinfo" @click="toSubmitInfo" v-show="hidshow">提交</div>
    </div>
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";
import HouseItem from "components/common/houseitem/HouseItem";

import { appointmentHouse, submitAppointment } from "network/appointmentHouse";

import { getWeekDay, figureOutWeek, wholeFigureOutWeek } from "common/utils";

import { mapState } from "vuex";

import { isEmpty } from "common/utils";

const num = [
  "今天",
  "明天",
  `${figureOutWeek(new Date())[2]} ${getWeekDay(new Date().getDay() + 2)}`,
  `${figureOutWeek(new Date())[3]} ${getWeekDay((new Date().getDay() + 3)%7)}`,
  `${figureOutWeek(new Date())[4]} ${getWeekDay((new Date().getDay() + 4)%7)}`,
  `${figureOutWeek(new Date())[5]} ${getWeekDay((new Date().getDay() + 5)%7)}`,
  `${figureOutWeek(new Date())[6]} ${getWeekDay((new Date().getDay() + 6)%7)}`,
];
const unit = [
  "上午8点",
  "上午9点",
  "上午10点",
  "上午11点",
  "上午12点",
  "下午13点",
  "下午14点",
  "下午15点",
  "下午16点",
  "下午17点",
  "下午18点",
  "晚上19点",
  "晚上20点",
  "晚上21点",
  "晚上22点",
];
export default {
  name: "toappointmenthouse",
  components: {
    BackBar,
    HouseItem,
  },
  data() {
    return {
      value: "",
      showPicker: false,
      message: "",
      columns: [
        {
          values: num,
          defaultIndex: 0, //默认展示第几位，可根据需求来定
        },
        {
          values: unit,
          defaultIndex: 0,
        },
      ],
      houseItem: {},
      imgPath: "",
      rentOutUserId: "",
      headerImgPath: "",
      rentOutUserRealName: "",
      rentOutUserTelPhone: "",
      staticpath: localStorage.getItem("staticpath"),
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hidshow: true, //显示或者隐藏footer,
      isResize: false, //默认屏幕高度是否已获取
    };
  },
  methods: {
    toBack() {
      this.$router.back();
    },
    onConfirm(val, index) {
      console.log(index[0]);
      this.value = wholeFigureOutWeek(new Date())[index[0]] + " " + val[1];
      this.showPicker = false;
    },
    toSubmitInfo() {
      let rentInUserId = this.userId;
      let context = this.message;
      let lookHouseTime = this.value;
      let houseId = this.$route.query.houseId;
      let rentOutUserId = this.rentOutUserId;

      if (isEmpty(context, lookHouseTime)) {
        this.$toast({
          message: "信息不能为空",
          position: "bottom",
        });
        return;
      }
      submitAppointment({
        rentInUserId,
        context,
        lookHouseTime,
        houseId,
        rentOutUserId,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast({
            message: "预约成功",
            position: "bottom",
          });
          this.$router.push("/myappointment/pending");
        }
      });
    },
  },
  created() {
    let houseId = this.$route.query.houseId;
    appointmentHouse({ houseId }).then((res) => {
      console.log(res);
      this.houseItem = res.data;
      this.imgPath = this.staticpath + res.data.images[0].path;
      this.rentOutUserId = res.data.rentOutUser.id;
      this.headerImgPath = this.staticpath + res.data.rentOutUser.header;
      this.rentOutUserRealName = res.data.rentOutUser.realName;
      this.rentOutUserTelPhone = res.data.rentOutUser.telPhone;
    });
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
  watch: {
    showHeight() {
      if (this.docmHeight >= this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
      console.log(this.hidshow);
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        if (!this.isResize) {
          //默认屏幕高度
          this.docmHeight = document.documentElement.clientHeight;
          this.isResize = true;
        }
        //实时屏幕高度
        this.showHeight = document.body.clientHeight;
        console.log(this.showHeight);
      })();
    };
  },
};
</script>

<style scoped>
.toappointmenthouse-content {
  padding-top: 50px;
}
.rentUserInfo {
  display: flex;
  justify-content: space-between;
  box-sizing: content-box;
  height: 50px;
  margin: 10px 20px;
  padding: 10px 0;
  line-height: 50px;
  font-size: 14px;
}
.img-box {
  height: 50px;
  width: 50px;
  margin-right: 15px;
  border-radius: 50px;
  overflow: hidden;
}
.img-box img {
  height: 50px;
  width: 50px;
}
.userBaseInfo {
  display: flex;
}
.line {
  height: 10px;
  background-color: #efefef;
}
.dataSelect {
  padding: 0 20px;
}
.submitinfo {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ff5654;
  color: #fff;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}
</style>